<template>
  <!-- 导航栏 -->
  <van-nav-bar title="购物车列表" left-text="返回" left-arrow @click-left="onClickLeft" />
  <!-- 物品列表 -->
  <div class="wrap">
    <div class="list" v-for="(item, index) in CartArr" :key="item.id">
      <van-checkbox v-model="item.is_select" @click="SingleChange(item)"></van-checkbox>
      <van-card
        :origin-price="item.price > item.current_price ? item.price : null"
        :price="item.current_price"
        :desc="item.category"
        :title="item.title"
        :thumb="item.img_small_logo"
      >
        <template #tags>
          <van-tag plain type="primary" v-if="item.is_sale">折扣</van-tag>
          <van-tag plain type="primary" v-if="item.is_hot">热卖</van-tag>
        </template>
        <template #footer>
          <p>小计：￥{{ (item.current_price * 100 * item.cart_number) / 100 }}</p>
          <van-stepper v-model="item.cart_number" theme="round" button-size="22" disable-input />
          <van-button class="btn" size="small" type="danger" @click="DelFn(item)">删除</van-button>
        </template>
      </van-card>
    </div>
  </div>
  {{ Count_price }}
  <!-- 提交订单栏 -->
  <van-submit-bar :price="Count_price" button-text="提交订单" @submit="onSubmit">
    <van-checkbox v-model="isAll" @click="AllChange">全选</van-checkbox>
  </van-submit-bar>
</template>
<script>
import http from "@/utils/http.js";
export default {
  data() {
    return {
      isAll: false,
      CartArr: [],
      checked: false
    };
  },
  computed: {
    Count_price() {
      let r = this.CartArr.filter((v) => v.is_select == true).reduce(
        (sum, v) => sum + v.current_price * 100 * v.cart_number,
        0
      );
      console.log(r);
      return r;
    }
  },
  methods: {
    AllChange() {
      http
        .request({
          url: "/cart/select/all",
          method: "POST",
          data: {
            id: localStorage.getItem("user_id"),
            type: this.isAll ? 1 : 0
          }
        })
        .then((r) => {
          console.log(r.data.message);
          this.loadList();
        });
    },
    SingleChange(v) {
      http
        .request({
          url: "/cart/select",
          method: "POST",
          data: {
            id: localStorage.getItem("user_id"),
            goodsId: v.goods_id
          }
        })
        .then((r) => {
          console.log(r);
          this.loadList();
        });
    },
    onSubmit() {
      showToast({
        message: "没米别买！",
        icon: "/hh.jpg"
      });
    },
    async DelFn(v) {
      const r = await http.request({
        url: "/cart/remove",
        method: "GET",
        params: {
          id: localStorage.getItem("user_id"),
          goodsId: v.goods_id
        }
      });
      console.log(r.data);
      if (r.data.code) {
        this.loadList();
      }
      showSuccessToast(r.data.message);
    },
    onClickLeft() {
      this.$router.replace("/");
    },
    loadList() {
      http
        .request({
          url: "/cart/list",
          method: "GET",
          params: {
            id: localStorage.getItem("user_id")
          }
        })
        .then((v) => {
          // console.log(v.data);
          this.CartArr = v.data.cart;
          console.log(this.CartArr);
          this.isAll = this.CartArr.every((v) => v.is_select == true);
        });
    }
  },
  created() {
    this.loadList();
  }
};
</script>
<style lang="css" scoped>
.van-submit-bar {
  bottom: 52px;
}
.van-card {
  margin: 0;
  flex: 9;
}
.wrap {
  height: calc(100vh - 150px);
  overflow: auto;
}
.list {
  display: flex;
  box-sizing: border-box;
  border: 1px solid #cecece;
}
.list > .van-checkbox {
  flex: 1;
  background-color: #f7f8fa;
}
.btn {
  margin-left: 20px;
}
</style>
